<template>
  <div class="wrap">
    <div class="header">
      <div id="icon" @click="btnIcon">
        <van-icon name="arrow-left" />
      </div>
      <div id="text">预约登记</div>
      <div></div>
    </div>
    <div class="main">
      <div class="banner">
        <img src="../../../assets/images/presale/titleImg.png" id="images" />
        <p id="text">预约登记信息提交成功后不可更改</p>
      </div>
      <van-form @failed="onFailed" @submit="onSubmit">
        <!-- 进行手机号正则校验 -->
        <van-field
          v-model="config.value1"
          name="phone"
          label="手机号"
          placeholder="填写收货人手机号"
          :rules="[
            {
              pattern: /^[1]([3-9])[0-9]{9}$/,
              message: '手机号输入错误，请从新填写',
            },
          ]"
        />
        <!-- 进行姓名正则校验 -->
        <van-field
          v-model="config.value2"
          name="name"
          label="姓名"
          placeholder="填写收货人姓名"
          :rules="[
            {
              pattern: /^[\u4e00-\u9fa5]{2,4}$/,
              message: '真实姓名输入有误，请从新填写',
            },
          ]"
        />
        <!-- 进行身份证号码正则校验 -->
        <van-field
          v-model="config.value3"
          name="idCard"
          label="身份证号码"
          placeholder="填写身份证号码"
          :rules="[
            {
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: '身份证号输入错误，请从新填写',
            },
          ]"
        />
        <!-- 联级选择器 -->
        <van-field
          v-model="config.fieldValue"
          is-link
          readonly
          name="address_press"
          label="选择收货地址"
          placeholder="请选择所在地区"
          @click="show = true"
          :rules="[
            {
              required: true,
              message: '请选择收货地址',
            },
          ]"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="填写收货地址"
            :options="options"
            :field-names="fieldNames"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
        <!-- 输入详细地址 -->
        <van-field
          v-model="config.address"
          rows="2"
          autosize
          name="receiptAddress"
          label="详细地址"
          type="textarea"
          maxlength="100"
          placeholder="请输入详细地址"
          show-word-limit
          :rules="[
            {
              required: true,
              message: '地址不能为空',
            },
          ]"
        />
        <!-- 勾选同意复选框 -->
        <div class="leting" style="margin-top: 27px">
          <van-checkbox
            v-model="config.checked"
            checked-color="#12BB82"
            icon-size="14px"
            id="checked"
          >
            <span id="ptings">请勾选即同意预约活动协议</span>
          </van-checkbox>
        </div>
        <!-- 提交表单 -->
        <div style="margin-top: 65px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            class="submit"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import addressList from "@/utils/address.js";
import { applyAppointment } from "@/api/presale/registration";

export default {
  data() {
    return {
      // from表格
      config: {
        value1: "",
        value2: "",
        value3: "",
        //复选框
        checked: false,
        //收货地址
        fieldValue: "",
        // 详细地址
        address: "",
      },
      //联级选择器
      cascaderValue: "",
      show: false,
      fieldNames: {
        text: "name",
        value: "code",
        children: "children",
      },
      options: [],
      // 详情页传过来的参数
      router_query: "",
      area: "",
      cityName: "",
      provinceName: "",
      address_code: "",
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  created() {
    this.options = addressList;
    console.log("this.$route.query.id", this.$route.query);
    this.router_query = this.$route.query;
  },
  methods: {
    // 预约登记
    applyAppointmentPost(params) {
      applyAppointment(params)
        .then((res) => {
          if (res.data.code == 200) {
            Dialog.alert({
              message: "提交成功！",
              theme: "round-button",
              confirmButtonColor:
                "linear-gradient(313deg, #a1008c 0%, #ff005e 100%)",
            }).then(() => {
              this.$router.push("/successfully");
            });
          } else {
            console.log("error，接口请求失败！");
            Dialog.alert({
              message: "提交失败，请重试！",
              theme: "round-button",
              confirmButtonColor:
                "linear-gradient(313deg, #a1008c 0%, #ff005e 100%)",
            });
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    btnIcon() {
      // this.$router.push("/productDetails");
      this.$router.go(-1);
    },
    // 表单填写错误时触发
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
    // 表单填写正确时触发
    onSubmit(values) {
      // 判断是否填写完成
      if (!this.config.checked) {
        Dialog.alert({
          message: "请阅读并同意抽签协议！",
          theme: "round-button",
          confirmButtonColor:
            "linear-gradient(313deg, #a1008c 0%, #ff005e 100%)",
        }).then(() => {
          // on close
        });
      } else {
        let params = {
          // 商品活动唯一id 预约登记的ID
          activityGoodsId: this.router_query.activityGoodsId,
          // 收货地址
          area: this.area,
          cityName: this.cityName,
          // 商品数量
          goodsCount: this.router_query.count,
          // 规格id
          goodsSkuId: this.router_query.defaultSkuId,
          // 身份证号
          idCard: values.idCard,
          // 姓名
          name: values.name,
          // 手机号
          phone: values.phone,
          provinceName: this.provinceName,
          // 详细收货地址
          receiptAddress: values.receiptAddress,
          // 地区编码
          // address_code: this.address_code,
        };
        console.log("valuesd++++", params);
        this.applyAppointmentPost(params);
      }
    },
    // 全部选项选择完毕后，会触发 onFinish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.config.fieldValue = selectedOptions
        .map((option) => option.name)
        .join("/");
      // 区县名称
      this.area = selectedOptions[0].name;
      // 市名称
      this.cityName = selectedOptions[1].name;
      // 省名称
      this.provinceName = selectedOptions[2].name;
      // 地区编号
      // this.address_code = selectedOptions[2].code;
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  overflow: hidden;
  width: 100%;
  font-family: Arial, Helvetica;
  font-size: 14px;
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(316deg, #892385 0%, #ed2e61 100%);
    text-align: center;
    #icon {
      padding-left: 10px;
      font-size: 20px;
      color: #ffffff;
    }
    #text {
      color: #ffffff;
      font-size: 18px;
      padding-right: 10px;
    }
  }
  .main {
    width: 100%;
    .banner {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 37px;
      background: #ffddc7;
      opacity: 0.57;
      #images {
        width: 18px;
        height: 18px;
        padding-left: 22px;
      }
      #text {
        font-size: 12px;
        font-weight: 400;
        color: #ff480a;
        padding-left: 8px;
      }
    }
    .leting {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      #checked {
        margin-left: 210px;
      }
      #ptings {
        font-size: 12px;
        color: #7a7a7a;
      }
    }
    .submit {
      width: 277px;
      height: 41px;
      background: linear-gradient(313deg, #a1008c 0%, #ff005e 100%);
      text-align: center;
      border: none;
      margin: 0 auto;
    }
  }
  .footer {
    width: 100%;
  }
}
</style>